<template>
	<view>
		<view class="header">
			<image src="../../static/stock/left.png" mode="" @click="goback()"></image>

			<view class="header-b">
				<view class="box" @tap="$open('deal')">交易</view>
				<view class="box" @tap="$open('arrears')">欠数</view>
				<view class="box" @tap="$open('income')">收支</view>
				<view class="box" style="color:#249af6; background-color: #FFFFFF;">库存</view>
			</view>
		</view>

		<view class="tabbar">
			<view class="tab-v">
				<view class="tabbar-o">时间</view>
				<view class="tabbar-o">总入库</view>
				<view class="tabbar-o">总出库</view>
			</view>
			<view class="tab-v">
				<view class="tabbar-o move" style="display: flex;">
					<view class="uni-list">
						<view class="uni-list-cell">
							<view class="uni-list-cell-db">
								<picker @change="bindPickerChange" :value="index" :range="array">
									<view class="uni-input f26">{{ array[index] }}</view>
								</picker>
							</view>
						</view>
					</view>
					<image src="../../static/images/tb_down.png" mode="" style="margin-top: 15rpx; margin-left: 15rpx;"></image>
				</view>
				<view class="tabbar-o red move-l">{{ in_number }}</view>
				<view class="tabbar-o red move-y">{{ out_number }}</view>
			</view>
		</view>
		<view class="user">
			<view class="user-one">
				<view>
					<image src="../../static/bu/1.png" class="img1" mode="aspectFit"></image>
					手动入库
				</view>
				<view class="number f28 c333">{{ in_store }}</view>
			</view>
			<view class="user-one">
				<view>
					<image src="../../static/bu/2.png" class="img2" mode="aspectFit"></image>
					手动出库
				</view>
				<view class="number f28 c333">{{ out_store }}</view>
			</view>
			<view class="user-one">
				<view>
					<image src="../../static/bu/3.png" class="img3" mode="aspectFit"></image>
					发货
				</view>
				<view class="number f28 c333">{{ deliver }}</view>
			</view>
			<view class="user-one">
				<view>
					<image src="../../static/bu/4.png" class="img4" mode="aspectFit"></image>
					收到退货
				</view>
				<view class="number f28 c333">{{ this.return }}</view>
			</view>
			<view class="user-one">
				<view>
					<image src="../../static/bu/5.png" class="img5" mode="aspectFit"></image>
					手动调整
				</view>
				<view class="number f28 c333">{{ manual_adjust }}</view>
			</view>
			<view class="user-one">
				<view>
					<image src="../../static/bu/6.png" class="img6" mode="aspectFit"></image>
					盘点调整
				</view>
				<view class="number f28 c333">{{ adjust }}</view>
			</view>
			<view class="user-one">
				<view>
					<image src="../../static/bu/7.png" class="img7" mode="aspectFit"></image>
					采购入库
				</view>
				<view class="number f28 c333">{{ purchase_in }}</view>
			</view>
			<view class="user-one">
				<view>
					<image src="../../static/bu/8.png" class="img8" mode="aspectFit"></image>
					采购退货
				</view>
				<view class="number f28 c333">{{ purchase_out }}</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			index: 0,
			array: ['今日', '昨日', '七日', '30日', '全部'],
			days: 0,
			add: {},
			out_number: '',
			in_number: '',
			in_store: '',
			out_store: '',
			deliver: '',
			return: '',
			manual_adjust: '',
			adjust: '',
			purchase_in: '',
			purchase_out: ''
		};
	},
	onLoad() {
		this.showAll();
	},
	methods: {
		goback() {
			uni.navigateBack({
				delta: 1
			});
		},
		bindPickerChange: function(e) {
			// console.log('picker发送选择改变，携带值为', e.target.value);
			this.index = e.target.value;
			if (this.index == 0) {
				this.days == 1;
			}
			if (this.index == 1) {
				this.days == 2;
			}
			if (this.index == 2) {
				this.days == 7;
			}
			if (this.index == 3) {
				this.days == 30;
			}
			if (this.index == 4) {
				this.days == 0;
			}
			this.showAll();
		},
		showAll() {
			this.$ajax('api/v1.statistics/delivery', {
				days: this.days
			})
				.then(res => {
					this.add = res.result;
					// console.log(this.add);
					this.in_number = this.add.total.in_number;
					this.out_number = this.add.total.out_number;
					const { list } = this.add;
					this.in_store = list.in_store.in_number;
					this.out_store = list.out_store.out_number;
					this.manual_adjust = `${list.manual_adjust.in_number}+(-${list.manual_adjust.out_number})`;
					this.deliver = list.deliver.out_number;
					this.return = list.return.in_number;
					this.adjust = `+${list.manual_adjust.in_number}(-${list.manual_adjust.out_number})`;
					this.purchase_in = list.purchase_in.in_number;
					this.purchase_out = list.purchase_in.out_number;
				})
				.catch(res => {
					console.log(Error);
				});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f5f5f5;
	margin: 0;
	padding: 0;
}
.header {
	background-color: #249af6;
	padding: 70rpx 30rpx 20rpx 30rpx;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	image {
		width: 21rpx;
		height: 38rpx;
	}
	.header-b {
		width: 441rpx;
		height: 59rpx;
		border: 2rpx #ffffff solid;
		margin: 0 auto;
		display: flex;

		.box {
			width: 25%;
			text-align: center;
			border-right: 2rpx solid #ffffff;
			color: #ffffff;
			font-size: 32rpx;
			line-height: 58rpx;
			font-family: PingFang SC;
			&:last-child {
				border-right: none;
			}
		}
	}
}
.tabbar {
	width: 100%;
	height: 127rpx;
	background-color: #ffffff;
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: rgba(51, 51, 51, 1);
	padding-top: 40rpx;

	.tab-v {
		display: flex;
		justify-content: space-around;
	}
	image {
		width: 17rpx;
		height: 10rpx;
		margin-left: 5rpx;
	}
}
.red {
	color: #f64444;
}
.user {
	margin-top: 20rpx;
	background-color: #ffffff;
	padding: 30rpx 0;
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #333333;
	box-sizing: border-box;
	.user-one {
		margin: 0;
		padding: 0;
		display: flex;
		height: 123rpx;
		line-height: 123rpx;
		justify-content: space-between;
		border-bottom: 3rpx solid #eeeeee;
		
		
		image {
			width: 44upx;
			height: 45upx;
			vertical-align: middle;
			margin-left: 30rpx;
			margin-right: 25rpx;
		}
		.img2{
			width: 44upx;
			height: 44upx;
		}
		.img3{
			width: 53upx;
			height: 45upx;
		}
		.img4{
			width: 53upx;
			height: 45upx;
		}
		.img8{
			width: 49upx;
			height: 44upx;
		}
		.img7{
			width: 49upx;
			height: 44upx;
		}
		.user-span {
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(102, 102, 102, 1);
			margin-left: 39rpx;
		}
		.number {
			padding-right: 30upx;
		}
	}
}
.move {
	position: relative;
	left: -22rpx;
}
.move-l {
	position: relative;
	left: -38rpx;
}
.move-y {
	position: relative;
	left: -26rpx;
}
</style>
